<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义tree</title>
        <link rel="stylesheet" href="../../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="../../js/zTree/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../js/zTree/js/jquery.ztree.core.js"></script>
        <script type="text/javascript" src="../../js/zTree/js/jquery.ztree.exedit.js"></script>
        <script type="text/javascript" src="../../js/zTree/js/jquery.ztree.excheck.js"></script>
        <style type="text/css">
            .ztree li span.button.add {
                margin-left: 2px;
                margin-right: -1px;
                background-position: -144px 0;
                vertical-align: top;
                *vertical-align: middle
            }
        </style>
        <script language="JavaScript">
            var zTreeObj;

            var setting = {
                view: {
                    addHoverDom: addHoverDom,
                    removeHoverDom: removeHoverDom,
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                edit: {
                    enable: true,
                    editNameSelectAll: true,
                    showRemoveBtn: showRemoveBtn,
                    showRenameBtn: showRenameBtn

                },
                callback: {
                    //beforeRemove : beforeRemove,    // 用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
                    onRemove: onRemove,    // 用于捕获删除节点之后的事件回调函数。
                    //beforeRename: beforeRename, // 用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，
                    // 更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
                    onRename: onRename    // 用于捕获节点编辑名称结束之后的事件回调函数
                }

            };
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zNodes = [
                {id: 1, pId: 0, name: "父节点 1", open: true},
                {id: 11, pId: 1, name: "叶子节点 1-1"},
                {id: 12, pId: 1, name: "叶子节点 1-2"},
                {id: 13, pId: 1, name: "叶子节点 1-3"},
                {id: 2, pId: 0, name: "父节点 2", open: true},
                {id: 21, pId: 2, name: "叶子节点 2-1"},
                {id: 22, pId: 2, name: "叶子节点 2-2"},
                {id: 23, pId: 2, name: "叶子节点 2-3"},
                {id: 3, pId: 0, name: "父节点 3", open: true},
                {id: 31, pId: 3, name: "叶子节点 3-1"},
                {id: 32, pId: 3, name: "叶子节点 3-2"},
                {id: 33, pId: 3, name: "叶子节点 3-3"}
            ];

            $(document).ready(function () {
                getNodes();
                
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });

            function showRemoveBtn(treeId, treeNode) {
                return !treeNode.isFirstNode;
            }

            function showRenameBtn(treeId, treeNode) {
                return !treeNode.isLastNode;
            }

            function onRemove(event, treeId, treeNode) {
                alert(treeNode.tId + ", " + treeNode.name);
            }

            function onRename(event, treeId, treeNode, isCancel) {
                alert(treeNode.tId + ", " + treeNode.name);
            }

            // 用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            var newCount = 1;

            function addHoverDom(treeId, treeNode) {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>";
                sObj.after(addStr);
                var btn = $("#addBtn_" + treeNode.tId);
                if (btn) btn.bind("click", function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
                    return false;
                });
            };

            // 用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            function removeHoverDom(treeId, treeNode) {
                $("#addBtn_" + treeNode.tId).unbind().remove();
            };
        </script>
    </head>
    <body>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </body>
</html>